<template>
  <div class="wrapper">
    
    <div class="search-header">
  		<i-row>
  	    <i-col offset="2" span="17">
  	    	<i-input maxlength="20" i-class="search-input" @change="searchBind" placeholder="产品名称或ID" />
  	    </i-col>
  	    <i-col offset="1" span="2">
  	    	<i-icon @click='fetchList' type="search" size="28" color="#1EB4C5" />
  	    </i-col>
  		</i-row>
    </div>

    <scroll-view class="product-list" scroll-y @scrolltolower="loadList">
  		<div class="scroll-content" v-for="product in productList" :key="product.ID">
        <i-cell title-class="cell-title" label-class="cell-label" @click='toProduct(product.ID)'
          :title="product.ProductName" :label="product.CategoryChar" only-tap-footer is-link>
          <div class="product-content" style="display: block;">
            <span class='product-info'><p class='info-tag'>产品协议：</p><p class='info-content'>{{ product.ProtocolChar }}</p></span>
            <span class='product-info'><p class='info-tag'>接入设备：</p><p class='info-content'>{{ product.DeviceNum }}台</p></span>
            <span class='product-info'><p class='info-tag'>生成应用：</p><p class='info-content'>{{ product.AppNum }}个</p></span>
            <span class='product-info'><p class='info-tag'>数据流数：</p><p class='info-content'>{{ product.StreamNum }}个</p></span>
            <span class='product-info'><p class='info-tag'>触发器数：</p><p class='info-content'>{{ product.TriggerNum }}个</p></span>
          </div>
        </i-cell>
  		</div>

      <i-load-more v-if='loadSpin' />

      <i-divider content="暂无其他数据" v-if='nomore'></i-divider>

    </scroll-view>

    <i-spin size="large" fix v-if="spinShow"></i-spin>
    
    <i-message id="message" />

  </div>
</template>

<script>

import store from '../store/store'
import { request } from '@/utils/index'
import { transCategory, transProtocol } from '@/utils/dict'

const { $Message } = require('../../../static/dist/base/index')

export default {
  components: {},

  data () {
    return {
      nomore: false,
      loading: false,
      spinShow: false,
      loadSpin: false,
      searchInput: '',
      pageSize: 5,
      currentPage: 1,
      totalNum: 0,
      productList: []
    }
  },
  onLoad (options) {
    this.fetchList()
  },
  methods: {
    fetchList () {
      this.nomore = false
      this.spinShow = true
      this.currentPage = 1
      var target = `/api/v1/product/list?offset=${this.currentPage - 1}&limit=${this.pageSize}`
      if (this.searchInput !== '') {
        target += `&search=${this.searchInput}`
      }
      request(target, { token: this.token }, 'GET').then((ids) => {
        if (ids.code !== 200) {
          $Message({ content: '请求错误，请重试', type: 'error' })
          return false
        }

        this.spinShow = false
        this.productList = this.dataProcess(ids.data.row)
        this.totalNum = ids.data.total

        if (this.totalNum < this.pageSize) {
          this.nomore = true
        }
      }, (e) => {
        $Message({ content: '请求错误，请重试', type: 'error' })
        return false
      })
    },
    loadList () {
      if (this.pageSize * this.currentPage <= this.totalNum) {
        this.loadSpin = true
        this.currentPage += 1
        var target = `/api/v1/product/list?offset=${this.currentPage - 1}&limit=${this.pageSize}`
        if (this.searchInput !== '') {
          target += `&search=${this.searchInput}`
        }
        request(target, { token: this.token }, 'GET').then((ids) => {
          if (ids.code !== 200) {
            $Message({ content: '请求错误，请重试', type: 'error' })
            return false
          }
          var self = this
          setTimeout(function () {
            self.productList = self.productList.concat(self.dataProcess(ids.data.row))
            self.totalNum = ids.data.total
            self.loadSpin = false
            if (ids.data.row.length === 0) {
              self.nomore = true
            }
          }, 700)
        }, (e) => {
          $Message({ content: '请求错误，请重试', type: 'error' })
          return false
        })
      }
    },
    searchBind (e) {
      this.searchInput = e.mp.detail.detail.value
    },
    dataProcess (data) {
      for (var i = data.length - 1; i >= 0; i--) {
        data[i].CategoryChar = transCategory(data[i].Category)
        data[i].ProtocolChar = transProtocol(data[i].Protocol)
      }
      return data
    },
    toProduct (ID) {
      wx.navigateTo({
        url: '../inProduct/main?productID=' + ID
      })
    }
  },
  computed: {
    token () {
      return store.state.token
    }
  }
}
</script>

<style>
.search-header{
  height: 12%;
	display: flex;
  justify-content: center;
  align-items: center;
}
.search-header i-row{
  width: 100%;
}
.search-input{
	height: 40rpx;
  display: inline-block;
	border-radius: 50rpx;
  box-shadow: 0 1px 3px rgba(26,26,26,.1);
}
.product-list{
  height: 88%;
}
i-cell{
	display: block;
	margin-top: 20rpx;
}
i-cell:first-child{
  margin-top: 0rpx;
}
i-cell:last-child{
  margin-bottom: 20rpx;
}
.cell-title{
  display: inline-block;
  color: #1EB4C5;
}
.cell-label{
  display: inline-block;
  font-weight: bolder;
  background-color: #33DEB4;
  font-size: 14px;
  color: #FFF !important;
  padding: 3px 6px;
  margin-left: 15px;
  border-radius: 10px;
}
.product-info{
  width: 300rpx;
  color: #999;
  margin-top: 10px;
  display: inline-block;
}
.product-info:first-child{
  display: block;
}
.product-info p{
  display: inline-block;
}
.product-info .info-tag{
  width: 150rpx;
}
.product-info:nth-child(n+2) .info-content{
  color: #1EB4C5;
}
</style>
